<!DOCTYPE HTML>
<html>
  <head>
	

    <script>
     <!-- L = cat(3,L,a,b)* 255;-->
	 <!--L=uint8(round(cat(3,L,a,b) * 255));-->
    window.onload = function()
	{
		var imageObj = new Image();
		imageObj.onload = function()
		{
			drawImage(this);
		};
		//imageObj.src = "solar.1024.1024.gif";
		imageObj.src = "cat.jpg";
	};
 
function drawImage(imageObj)
{
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var destX = 69;
    var destY = 50;
 
	context.drawImage(imageObj,0,0);
 
    var imageData = context.getImageData(0, 0, imageObj.width, imageObj.height);
    var data = imageData.data;
	var height=imageObj.height;
	var width=imageObj.width;
	
	/////////// RGB to LAB////////////////
	var size=data.length/4;
    R= new Array(size);
	G= new Array(size);
	B=new Array(size);
	
	if(arguments.length==1)
	{
		var m=0;
		for (var l =0; l < data.length; l += 4)
		{
			R[m]=data[l];
			G[m]=data[l+1];
			B[m]=data[l+2];
			m++;
		}
	}
	
	
	for(var i =0; i < size; i++ )
	{
		R[i]=R[i]/255;
		G[i]=G[i]/255;
		B[i]=B[i]/255;
	}
	
	R1= new Array(height);
	for (i = 0; i <height; ++ i)
	R1[i] = new Array(width);
	
	G1= new Array(height);
	for (i = 0; i <height; ++ i)
	G1[i] = new Array(width);
	
	B1= new Array(height);
	for (i = 0; i <height; ++ i)
	B1[i] = new Array(width);
	
	
	
	var j=0;
	for(var row=0;row<height;row++)
	{
		for(col=0;col<width;col++)
		{
			R1[row][col]=R[j];
			G1[row][col]=G[j];
			B1[row][col]=B[j];
			
			j++;
		}
		
	}
	
	
	j=0;
	for(var col=0;col<width;col++)
	{
		for(var row=0;row<height;row++)
		{
			R[j]=R1[row][col];
			G[j]=G1[row][col];
			B[j]=B1[row][col];
			
			j++;
		}
		
	}
	
	
	
	
	var T = 0.008856;
	var s=height*width;
	
	RGB= new Array(3);
	for (i = 0; i <3; ++ i)
		RGB[i] = new Array(s);
	
	XYZ= new Array(3);
	for (i = 0; i <3; ++ i)
		XYZ[i] = new Array(s);
	
	 
		for(var col=0; col<s; col++)
		{
			RGB[0][col]=R[col];
			RGB[1][col]=G[col];
			RGB[2][col]=B[col];
		
		}
		
	MAT= new Array(3);
	for (i = 0; i < MAT.length; ++ i)
	MAT[i] = new Array(3);	
	
	MAT[0][0]=0.412453;
	MAT[0][1]=0.357580;
	MAT[0][2]=0.180423;
	MAT[1][0]=0.212671;
	MAT[1][1]=0.715160;
	MAT[1][2]=0.072169;
	MAT[2][0]=0.019334;
	MAT[2][1]=0.119193;
	MAT[2][2]=0.950227;
	
	var sum;
	for(var i=0;i<3 ;i++)
	{
		for(var j=0;j<s ;j++)
		{
			sum=0;
			for(var k=0;k<3;k++)
			{
				sum=sum+(MAT[i][k]*RGB[k][j]);
				XYZ[i][j]=sum;
				
				
			}
			
		}
		
	}
	
	
	X= new Array(size);
	Y= new Array(size);
	Z=new Array(size);
	XT= new Array(size);
	YT= new Array(size);
	ZT=new Array(size);
	XT1= new Array(size);
	YT1= new Array(size);
	ZT1=new Array(size);
	Y3=new Array(size);
	fX=new Array(size);
	fY=new Array(size);
	fZ=new Array(size);
	L=new Array(size);
	a=new Array(size);
	b=new Array(size);
	
	
	for(var j=0;j<s ;j++)
		{
			
			X[j] = (XYZ[0][j]) / 0.950456;
			Y[j] = (XYZ[1][j]);
            Z[j] = (XYZ[2][j]) / 1.088754;		
      		
		}
 
    for(var j=0;j<s ;j++)
		{
			
			if(X[j]>T)
				XT[j]=1;
			else
			{
				XT[j]=0;	
			}
			
			if(Y[j]>T)
				YT[j]=1;
			else
			{
				YT[j]=0;	
			}
			
			if(Z[j]>T)
				ZT[j]=1;
			else
			{
				ZT[j]=0;
				
			}
				
					
		}
		
		for(var j=0;j<s ;j++)
		{

			Y3[j] = Math.pow(Y[j],.3333)	
		}
		
		for(var j=0;j<s ;j++)
		{
			
			fX[j]=XT[j]*(Math.pow(X[j],0.3333));
			if(XT[j]==0)
			XT1[j]=1;
			else
			XT1[j]=0;
			var temp=(7.787* X[j]) + (16/116);
			fX[j]=fX[j]+(XT1[j]*temp);
			
		}
		
		for(var j=0;j<s;j++)
		{
			fY[j]=YT[j]*Y3[j];
			if (YT[j] == 0) YT1[j]=1;
			else YT1[j]=0;
			var temp1 = (7.787* Y[j]) + (16/116);
			fY[j]=fY[j]+(YT1[j]*temp1);
		}
		
		for(var j=0;j<s ;j++)
		{			
			fZ[j]=ZT[j]*(Math.pow(Z[j],0.3333));
			if(ZT[j]==0)
			ZT1[j]=1;
			else
			ZT1[j]=0;
			var temp2=(7.787* Z[j]) + (16/116);
			fZ[j]=fZ[j]+(ZT1[j]*temp2);
			
			
		}
		
		
		
		for(var j=0;j<s ;j++)
		{
			
			var temp3=(116 * Y3[j]) - 16.0;
			L[j]=YT[j]*temp3;
			
			if(YT[j]==0)
			YT1[j]=1;
			else
			YT1[j]=0;
			var temp4=YT1[j]* (903.3 * Y[j]);
			
			L[j]=L[j]+temp4;
			
			a[j]=(500 * (fX[j] - fY[j]));
			b[j] =(200 * (fY[j] - fZ[j]));
			
			
		}
		
		
	
	
    f_L= new Array(height);
	for (i = 0; i < f_L.length; ++ i)
	f_L[i] = new Array(width);

		f_a= new Array(height);
	for (i = 0; i < f_a.length; ++ i)
	f_a[i] = new Array(width);
	
	f_b= new Array(height);
	for (i = 0; i < f_b.length; ++ i)
	f_b[i] = new Array(width);
	
	var j=0;
	for(var col=0;col<width;col++)
	{
		for(var row=0;row<height;row++)
		{
			
			f_L[row][col]=L[j];
			
			f_a[row][col]=a[j];
			f_b[row][col]=b[j];
			document.write(f_L[row][col]);
			document.write(" ; ");
			j++;
		}
		document.write("<br>");
		document.write("<br>");
		//document.write("<br>");
	}
	var l=0;
	
	
	for(var row=0;row<height;row++)
	{
		for(var col=0;col<width;col++)
		{
			
			data[l]=255*f_L[row][col];
			//document.write(f_a[row][col]);
			//document.write(" ; ");
			data[l+1]=255*f_a[row][col];
			data[l+2]=255*f_b[row][col];
			data[i+3]=255;
			//document.write(data[l+1]);
			//document.write(" ; ");
			
			l=l+4;
		}
		//document.write("<br>");
		//document.write("<br>");
	}
	
	////////////////// end RGB to LAB////////////
	
	
    // overwrite original image
   context.putImageData(imageData, 0, 0);
   
	
	
   
}


 
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1024" height="1024">
        </canvas>
    </body>
</html>